<script setup lang="ts">
import { computed } from 'vue'
import userConfigStore from '@renderer/store/userConfigStore'
import useFps from '@renderer/composables/useFps'
import { DataType } from '@renderer/type'
import { CloseOne } from '@icon-park/vue-next'

const { config } = userConfigStore()

interface Prop {
  type: DataType
  placeholder?: string
  tip?: string
  buttonStyle?: 'success' | 'danger' | 'primary'
}

const props = defineProps<Prop>()

const list = computed(() => {
  return props.type === 'size' ? config.sizes : config.frames
})

const { add, newValue, remove } = useFps()
</script>

<template>
  <el-select :placeholder="props.placeholder">
    <el-option v-for="(item, index) in list" :key="index" :label="item" :value="item">
      <div class="flex justify-between items-center">
        {{ item }}
        <div class="delIcon" @click="remove(props.type, index)" v-if="index > 1">
          <close-one theme="outline" size="12" />
        </div>
      </div>
    </el-option>
  </el-select>
  <div class="flex gap-1 mt-2 items-center">
    <el-input v-model="newValue" :placeholder="props.tip" size="default" />
    <el-button :type="props.buttonStyle" size="default" @click="add(props.type)">增加</el-button>
  </div>
</template>

<style lang="less" scoped>
.delIcon {
  @apply text-slate-300 hover:text-red-300 hover:scale-125 cursor-pointer duration-300;
}
</style>
